<!--
 * @Author: Bonnie
 * @Date: 2021-12-03 11:27:10
 * @LastEditTime: 2021-12-03 15:12:14
 * @LastEditors: Bonnie
 * @Description: 
 * @FilePath: /public_demo/src/views/nav_hover/index.vue
-->
<template>
  <div class="root-container">
    <h2>效果展示：</h2>
    <ul>
      <li v-for="item in 5" :key="item">
        <span>这里是测试文本</span>
      </li>
    </ul>

    <h2>代码展示：</h2>
    <article>
      <section>
        <pre>
            li {
                height: 40px;
                line-height: 40px;
                padding: 0 15px;
                // 菜单悬浮效果
                span {
                    position: relative;
                    &::after {
                        content: "";
                        position: absolute;
                        width: 98%;
                        height: 2px;
                        bottom: 0;
                        left: 0;
                        transform: scaleX(0);
                        background-color: #a862ea;
                        transform-origin: bottom right;
                        transition: transform 0.3s ease-in-out;
                    }
                    &:hover {
                        color: #8340ff;
                        &::after {
                            transform: scaleX(1);
                            transform-origin: bottom left;
                        }
                    }
                }
            }
      </pre>
      </section>
    </article>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {};
  }
};
</script>
<style lang='scss' scoped>
ul {
  li {
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    // 菜单悬浮效果
    span {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        width: 98%;
        height: 2px;
        bottom: 0;
        left: 0;
        transform: scaleX(0);
        background-color: #a862ea;
        transform-origin: bottom right;
        transition: transform 0.3s ease-in-out;
      }
      &:hover {
        color: #8340ff;
        &::after {
          transform: scaleX(1);
          transform-origin: bottom left;
        }
      }
    }
  }
}
</style>